<script lang="ts" setup>
import { MemberFixedBonu, mode2TextMap, mode2UnitMap, modeAndValueRules } from '../common'
import { getListReceiver, SetUpProrate } from '@/api/client-mall/product/sku/division'

const props = defineProps<{
  modelValue: any
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
}>()

const formData = ref<SetUpProrate[]>([])
watch(
  () => props.modelValue,
  (value) => {
    console.log(value)
    formData.value = value || []
  }
)
console.log('1111', props.modelValue)
watch(
  formData,
  (value) => {
    // const newValue = value
    //   .filter((item) => item)
    //   .map((item) => {
    //     console.log('gogo:', item)
    //     item.value = Number(item.value)
    //   })
    // const newVal = value?.map((item) => {
    //   const newItem = { ...item, value: Number(item.value) }
    //   return newItem
    // })
    // getListReceiverFun()

    const str = value
    console.log(str)
    emit('update:modelValue', str)
  },
  { deep: true }
)

const formRules = (index: number) =>
  computed(() => ({
    ...modeAndValueRules(formData.value[index].mode),
    delay: [{ required: true, message: '请输入分润延迟时间', trigger: 'blur' }]
  }))

// 添加分账
const handleAdd = () => {
  formData.value.push({
    mode: 'amount',
    value: 0,
    type: '',
    account: '',
    delay: 0
  })
}
const options = ref<{ value: string; label: string }[]>([])

// 获取商户号选择
const getListReceiverFun = (index: number) => {
  const accType = formData.value[index].type === 'PERSONAL_OPENID' ? 1 : 0
  formData.value[index].account = ''
  getListReceiver(accType).then((res) => {
    options.value = res.map((item) => {
      return { value: item.id, label: item.receiverAlias }
    })
  })
}

// 删除分账
const handleDelete = (index: number) => {
  formData.value.splice(index, 1)
}
</script>

<template>
  <div class="mt-4 mb-1 flex justify-between items-center">
    <h1 class="text-lg">固定分账</h1>
  </div>

  <div class="flex flex-col gap-3">
    <div v-for="(item, index) in formData" :key="index" class="p-3 border-1">
      <el-form ref="formRef" :model="item" :rules="formRules(index)" label-width="120px">
        <!-- 分润模式 -->
        <el-form-item label="分润模式" prop="mode">
          <el-radio-group v-model="item.mode">
            <el-radio-button :label="key" v-for="(text, key) in mode2TextMap" :key="key">
              {{ text }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <!-- 分润金额 -->
        <el-form-item :label="`分润${mode2TextMap[item.mode]}`" prop="value">
          <el-input
            class="w-20"
            v-model="item.value"
            type="number"
            :placeholder="`请输入分润${mode2TextMap[item.mode]}`"
          />
          <span class="inline-block ml-2">{{ mode2UnitMap[item.mode] }}</span>
        </el-form-item>
        <!-- 渠道 -->
        <!-- <el-form-item label="分帐接收方类型" prop="type">
          <el-radio-group v-model="item.type" @click="getListReceiverFun(index)">
            <el-radio-button label="MERCHANT_ID">商户号</el-radio-button>
            <el-radio-button label="PERSONAL_OPENID">个人</el-radio-button>
            <el-radio-button label="OFFLINE">线下结算</el-radio-button>
          </el-radio-group>
        </el-form-item> -->
        <!-- 账户 -->
        <el-form-item v-if="item.type !== 'OFFLINE'" label="分帐接收方" prop="account">
          <el-select v-model="item.account" placeholder="请选择分帐接收方">
            <template #header>
              <el-radio-group v-model="item.type" @click="getListReceiverFun(index)">
                <el-radio-button label="MERCHANT_ID">商户号</el-radio-button>
                <el-radio-button label="PERSONAL_OPENID">个人</el-radio-button>
              </el-radio-group>
            </template>
            <el-option
              v-for="itemOption in options"
              :key="itemOption.value"
              :label="itemOption.label"
              :value="itemOption.value"
            />
          </el-select>
        </el-form-item>
        <!-- 删除 -->
        <div class="flex justify-end">
          <el-button type="danger" @click="handleDelete(index)">删除</el-button>
        </div>
      </el-form>
    </div>
    <div class="flex justify-center">
      <el-button class="w-full" type="primary" plain @click="handleAdd">添加</el-button>
    </div>
  </div>
</template>
